<template>
  <div class="roleContainer" :style="{ height: roleContainerHeight }">
    <myHeader title="角色权限" titleAdd="添加角色"></myHeader>
    <!--    <el-button @click="showRoleAddDialog">添加角色</el-button>-->
    <Search></Search>
    <div class="tableContainer" :style="{ height: tableContainerHeight }">
      <el-table
          :data="tableData"
          :height="tableHeight"
          style="width: 100%"
          :default-sort="{ prop: 'vid', order: 'descending' }"
          stripe
          border
      >
        <el-table-column prop="rId" label="ID" sortable min-width="100">
        </el-table-column>
        <el-table-column prop="rName" label="角色名" sortable min-width="300">
        </el-table-column>
        <el-table-column
            prop="rDescription"
            label="描述"
            sortable
            min-width="250"
        >
        </el-table-column>
        <el-table-column prop="users" label="用户列表" sortable min-width="300">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.users" :key="index">
              {{item.mName}}
              <i v-if="index !== scope.row.users.length - 1">,</i>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rHandle" label="操作" sortable min-width="233">
          <template slot-scope="scope">
            <i class="el-icon-edit i-color" @click="getRolesInfo(scope.row)"></i>
            <i class="el-icon-close i-color" @click="deleteRole(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <Paging :pageSum="pageSum" :total="total"></Paging>
    </div>

    <RoleEdit></RoleEdit>
    <RoleAdd></RoleAdd>
  </div>
</template>

<script>
import RoleEdit from "@/pages/Role/RoleEdit";
import RoleAdd from "@/pages/Role/RoleAdd";
import {mapState, mapMutations, mapActions} from "vuex";
import Vue from 'vue'

export default {
  name: "Role",
  components: {
    RoleEdit,
    RoleAdd,
  },
  data() {
    return {
      tableData: [],
      users: [],
      pageSum: 0,
      limit: 10,
      page: 1,
      total: 0,
    };
  },
  computed: {
    ...mapState("Information", ["changeLimit", "changePage", "inputValue"]),
    ...mapState("roles", ["addStatus"]),
    changePage: {
      get() {
        return this.$store.state.Information.changePage
      },
      set(val) {
        return this.$store.state.Information.changePage = val
      }
    },
    changeLimit: {
      get() {
        return this.$store.state.Information.changeLimit
      },
      set(val) {
        return this.$store.state.Information.changeLimit = val
      }
    },
    inputValue: {
      get() {
        return this.$store.state.Information.inputValue
      },
      set(val) {
        return this.$store.state.Information.inputValue = val
      }
    },
    roleContainerHeight() {
      if (this.tableData.length > 15) {
        return 15 * 43 + 198 + "px";
      } else if (this.tableData.length < 10) {
        return 10 * 43 + 160 + "px";
      }
      return this.tableData.length * 43 + 198 + "px";
    },
    tableContainerHeight() {
      if (this.tableData.length > 15) {
        return 15 * 43 + 18 + "px";
      } else if (this.tableData.length < 10) {
        return 10 * 43 + 10 + "px";
      }
      return this.tableData.length * 43 + 18 + "px";
    },
    tableHeight() {
      if (this.tableData.length > 15) {
        return 15 * 43 - 60;
      } else if (this.tableData.length < 10) {
        return 10 * 43 - 60;
      }
      return this.tableData.length * 43 - 60;
    },
  },
  watch: {
    changeLimit(newLimit) {
      this.limit = newLimit;
      this.getInfo(this.limit, this.page)
    },
    changePage(newPage) {
      this.page = newPage;
      this.getInfo(this.limit, this.page)
    },
    inputValue(newValue) {
      this.searchInfo(newValue)
    },
    //监视添加状态
    addStatus(newStatus) {
      if (newStatus) this.getInfo(this.limit, this.page)
    }
  },
  methods: {
    ...mapActions('roles', ['getRolesInfo']),
    ...mapMutations("roles", ["handleRoleEdit"]),
    //请求页面数据函数
    async getInfo(limit, page) {
      await this.$axios({
        method: "POST",
        url: '/role/showRoles',
        params: {
          page,
          limit,
        },
      }).then(res => {
        this.tableData = res.data.data
        this.total = res.data.data.length;
        this.pageSum = Math.ceil(res.data.data.length / limit);
        if (res.data.data.length === 0) {
          this.changePage -= 1
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //搜索查询函数
    async searchInfo(keyword) {
      if (keyword === '') {
        this.getInfo(this.limit, this.page)
      } else {
        this.page = 1
        this.changePage = 1
        let limit = this.limit
        let page = this.page
        await this.$axios.get(`/role/selectByAll/${page}/${limit}/${keyword}`)
            .then(res => {
              if (res.data.data.length !== 0) {
                this.tableData = res.data.data
                this.total = res.data.data.length
                this.pageSum = Math.ceil(res.data.data.length / limit)
              }
            }).catch(err => {
              console.log(err)
            })
      }
    },
    //删除
    async deleteRole({rId}) {
      await this.$axios({
        method: 'POST',
        url: '/role/deleteUser',
        params: {
          rId
        }
      }).then(res => {
        console.log(res)
        if (res.data.msg === '删除成功') {
          this.getInfo(this.limit, this.page)
        }
      })
    }
  },
  created() {
    this.getInfo(this.limit, this.page);
  },
  beforeDestroy() {
    this.changePage = 1
    this.changeLimit = 10
    this.inputValue = ''
  }
}
</script>

<style scoped>
.roleContainer {
  width: 97%;
  margin: 15px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  border: 1px solid #cfd1d2;
}

.i-color {
  margin-right: 20px;
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}
</style>